layui.use(['jquery', 'form', 'layer', 'layedit'], function() {
    let $ = layui.jquery;
    let form = layui.form;
    let layer = layui.layer;
    let layedit = layui.layedit;

    //建立编辑器
    let index = layedit.build('demo');
    // 定义加载文章分类的方法


    //初始化所有的文章分类
    $.ajax({
        method: 'GET',
        url: '/my/article/cates',
        success: function(res) {
            console.log(res)
            if (res.status == 0) {
                res.data.forEach(function(item) {
                    let option = `<option value=${item.Id}>${item.name}</option>`;
                    $('#classsel').append(option);

                })
                form.render();
            }


        }
    })

    //初始化剪裁的区域
    let img = $('#image');
    //设置裁剪的属性
    let option = {
        aspectRatio: 1,
        preview: '.img-preview'
    };
    //初始化裁剪
    img.cropper(option);

    //选择图片
    $('#acceptBtn').on('click', function() {
        $('#pic').click();
    });
    //更换图片的时候，更新裁剪区
    $('#pic').on('change', function(e) {
        if (e.target.files.length == 0) {
            return;
        }
        let file = e.target.files[0];
        let imgUrl = URL.createObjectURL(file); //把文件对象转为url地址对象
        //更新裁剪区
        img.cropper('destroy').attr('src', imgUrl).cropper(option);
    });

    //保存表单的事件
    form.on('submit(addFilter)', function(data) {
        //使用表单对象初始化一个formdata
        let formData = new FormData($('#addForm')[0]);
        //获取文本编辑器的内容
        formData.append('content', layedit.getContent(index));
        //设置文章的状态
        formData.append('state', '已发布');
        //获取文章的封面
        img.cropper('getCroppedCanvas', {
            width: 400,
            height: 400
        }).toBlob(function(blob) {

            formData.append('cover_img', blob);
            //发送ajax，执行添加文章的操作
            $.ajax({
                method: 'POST',
                url: '/my/article/add',
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.status == 0) {
                        layer.msg('发布成功！');

                    }
                }
            });

        });

        return false;
    });






});
